昨天己經依照內容量做出相對的按鈕金歡喜，今天來把按鈕加入監聽「點擊」功能，就可以換頁了，天呀好棒棒：

繼續在 updateTitle 的 function 下來寫下對每顆按鈕的監聽：

//首先用 querySelectorAll 把每顆按鈕都選到：
var btn = document.querySelectorAll('.btncontent span');

//querySelectorAll 選出的按鈕是以陣列形式呈現，所以我們可以來個 for 迴圈一一監聽它們：
for (var i = 0; i < btn.length; i++) {
    //監聽按鈕，每次被點擊就會啟動 updateContent 這個 functaion 
    btn[i].addEventListener('click', updateContent.bind(this, i + 1, selectAry));
}

然後啊！然後啊！稍早之前，我們啟動 updateContent 這個 function 是選擇完上面區域之後才會啟動，但現在情況改變了（食指搖搖)，我們會啟動 updateContent 是因為按了按鈕，所以原本的監聽我們要把它碼掉：

//你沒有用了～滾！
//option.addEventListener('change', updateContent);

接著 updateContent 我們現在要來改寫，總共有三個地方要改：

1. 原來的 updateContent 後面綁的參數為 e，現在要改為綁 (page,data) 這二個參數，變為：

function updateContent(page,data)

2. 原本的 var select = e.target.value 也應該要刪掉

3. 底下替換的內容原本為${alldata[i]}的部分全都變成{data[i]}

4. for 迴圈裡的判斷應該也要變動的，但是我們稍後再進行變更：

緊接下來我們在 updateContent 的判斷式下加入一些程式碼，讓它能順利換頁：

var items = 6;
var dataIndexStart = (page - 1) * 6;
var dateIndexEnd = items * page

然後 for 迴圈就要改啦，原本是：

for (var i=0;i<allData.length;i++)

要改成：

for (i = dataIndexStart; i < dateIndexEnd; i++) 

然後多加一個判斷：

if (i>= data.length){break;}

稍晚一點我來想辦法把 code 完整呈現 (不然我覺得應該沒人知道我在共三小)，今天結束。